/* ============================================
   TOTALLY PLANNED LANDING - Visual Novel Theme
   Matte black with colorful icon contrast
   ============================================ */

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #161616;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --accent-neutral: #333333;
    --accent-light: #444444;
    --accent-highlight: #555555;
    --text-primary: #d4d4d4;
    --text-secondary: #888888;
    --text-muted: #555555;
    --text-highlight: #e8e8e8;
    --credits-color: #d4a535;
    --danger-color: #c0392b;
    --border-color: #1e1e1e;
    --border-hover: #333333;
    --font-main: 'Segoe UI', 'Inter', 'Roboto', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;
    --radius: 6px;
    --radius-sm: 4px;
    --transition: 0.2s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

/* Mobile / touch polish: kill tap delay, suppress callout, keep highlight subtle */
button, .btn-option, .story-choice-btn, input[type="range"], .custom-select-display,
[role="button"], a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
    -webkit-touch-callout: none;
}

/* Loading screen */
#loading-screen {
    position: fixed; inset: 0; background: #000;
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Volume toast */
.vol-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: rgba(20,20,20,0.92); color: rgba(255,255,255,0.75);
    font-size: 0.72rem; letter-spacing: 1px; padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.1); pointer-events: none;
    animation: fadeInOut 1.2s ease forwards; z-index: 8000;
}
@keyframes fadeInOut { 0%{opacity:0} 15%{opacity:1} 75%{opacity:1} 100%{opacity:0} }
body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ─── Screen System ─── */
.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; }

/* ═══════════════════════════════════════
   DISCLAIMER
   ═══════════════════════════════════════ */
#screen-disclaimer { align-items: center; justify-content: center; background: var(--bg-primary); }
.disclaimer-container { text-align: center; max-width: 480px; padding: 40px; }
.disclaimer-icon { font-size: 3rem; margin-bottom: 16px; filter: grayscale(1) brightness(1.2); }
.disclaimer-container h1 { font-size: 1.3rem; letter-spacing: 4px; color: var(--text-highlight); margin-bottom: 24px; font-weight: 500; }
.disclaimer-text { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 12px; line-height: 1.7; }
.disclaimer-text strong { color: var(--text-highlight); }
.disclaimer-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }

/* ═══════════════════════════════════════
   MAIN MENU
   ═══════════════════════════════════════ */
#screen-menu { align-items: center; justify-content: center; background: var(--bg-primary); overflow-y: auto; }
.menu-container { text-align: center; max-height: 100vh; padding: 16px; }
.menu-banner { max-width: 860px; width: 100%; margin-bottom: 12px; }
.menu-banner img { width: 100%; max-height: 35vh; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)); }
.menu-subtitle { color: var(--text-muted); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 48px; }
.menu-credit { color: var(--text-muted); font-size: 0.65rem; letter-spacing: 1.5px; margin-top: 32px; opacity: 0.6; }
.menu-socials { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
.menu-socials a { color: rgba(255,255,255,0.4); font-size: 0.6rem; text-decoration: none; letter-spacing: 0.5px; transition: color 0.2s; }
.menu-socials a:hover { color: rgba(255,255,255,0.8); }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.menu-version { margin-top: 48px; color: var(--text-muted); font-size: 0.75rem; }

/* ═══════════════════════════════════════
   OPTIONS
   ═══════════════════════════════════════ */
#screen-options { align-items: center; justify-content: center; background: var(--bg-primary); }
.options-container { max-width: 400px; width: 90%; }
.options-container h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); margin-bottom: 24px; text-align: center; font-weight: 400; }
.option-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.option-label { color: var(--text-secondary); font-size: 0.85rem; }
.option-control { display: flex; gap: 4px; }
.btn-option { padding: 5px 12px; font-size: 0.75rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-family: var(--font-main); transition: all var(--transition); }
.btn-option:hover { color: var(--text-secondary); border-color: var(--border-hover); }
.btn-option.active { background: var(--bg-card-hover); border-color: var(--accent-light); color: var(--text-primary); }
.divider { border: none; border-top: 1px solid var(--border-color); margin: 20px 0; }

/* Volume sliders */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 160px;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.volume-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-highlight, #fff);
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 0 4px rgba(255,255,255,0.15);
}
.volume-slider::-webkit-slider-thumb:hover {
    background: var(--text-highlight);
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-highlight, #fff);
    border: none;
    cursor: pointer;
}
.volume-slider::-moz-range-track {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
}
.volume-slider::-moz-range-progress {
    height: 6px;
    background: var(--accent-light, #888);
    border-radius: 3px;
}

/* ═══════════════════════════════════════
   CHARACTER CREATION
   ═══════════════════════════════════════ */
#screen-creation { align-items: flex-start; justify-content: center; background: var(--bg-primary); overflow-y: auto; padding: 40px 0; }
.creation-container { max-width: 560px; width: 92%; margin: 0 auto; position: relative; }

/* Self-dismissing system note (e.g. NPC name collision FYI).
   Sits below the step's Continue/Back buttons, centered. */
#cc-system-note {
    margin: 14px auto 0;
    max-width: 480px;
    width: fit-content;
    padding: 9px 16px;
    background: rgba(17, 21, 28, 0.95);
    border: 1px solid var(--border-hover);
    border-left: 3px solid #6cc8e8;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-align: center;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
#cc-system-note.visible {
    opacity: 1;
    transform: translateY(0);
}
.cc-options-btn {
    position: absolute; top: 0; right: 0;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 1.1rem; padding: 4px 10px;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.cc-options-btn:hover { color: var(--text-highlight); border-color: var(--accent-light); }

.briefing-header { text-align: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.briefing-badge { display: inline-block; padding: 3px 14px; font-size: 0.6rem; letter-spacing: 4px; text-transform: uppercase; border: 1px solid var(--danger-color); color: var(--danger-color); border-radius: 2px; margin-bottom: 14px; }
.briefing-usm-logo { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 12px; opacity: 0.85; }
.briefing-title { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 4px; color: var(--text-highlight); margin-bottom: 6px; font-weight: 600; }
.briefing-subtitle { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 2px; }

.briefing-dialogue { margin-bottom: 10px; }
.dialogue-line { padding: 8px 12px; border-radius: var(--radius); font-size: 0.85rem; line-height: 1.5; }
.dialogue-line.general { background: rgba(60,60,60,0.15); border-left: 3px solid var(--accent-light); color: var(--text-primary); font-style: italic; }

.cc-step { display: none; }
.cc-step.active { display: block; }
.cc-step-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.cc-step-actions { margin-top: 10px; display: flex; gap: 10px; }
.cc-step-actions .btn { flex: 1; }

.form-row { display: flex; gap: 12px; }
.form-group { margin-bottom: 16px; }
.form-group.half { flex: 1; }
.form-group label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input[type="text"] { width: 100%; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-main); font-size: 0.9rem; outline: none; transition: border-color var(--transition); }
.form-group input[type="text"]:focus { border-color: var(--accent-light); }

.cc-summary { margin-bottom: 16px; }
.summary-section { margin-bottom: 16px; }
.summary-title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); margin-bottom: 8px; }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
.summary-row span:first-child { color: var(--text-secondary); }
.summary-row span:last-child { color: var(--text-highlight); font-weight: 500; }
.error-text { color: var(--danger-color); font-size: 0.85rem; display: none; margin-bottom: 8px; }
.error-text.visible { display: block; }

/* ─── Character Creation: Intro ─── */
.cc-intro-text {
    text-align: center;
    padding: 32px 16px;
}

.cc-intro-line {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: 8px;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

.cc-intro-line:nth-child(1) { animation-delay: 0.3s; }
.cc-intro-line:nth-child(2) { animation-delay: 1.2s; }
.cc-intro-line:nth-child(3) { animation-delay: 2.5s; }
.cc-intro-line:nth-child(4) { animation-delay: 3.4s; }
.cc-intro-line:nth-child(5) { animation-delay: 4.6s; color: var(--text-highlight); }

/* ─── Character Creation: Portrait + Arrow Selectors ─── */
.cc-portrait-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

#cc-portrait-canvas {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    display: block;
}

.cc-selectors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    margin: 0 auto;
}

.cc-arrow-select label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    text-align: center;
}

.cc-arrow-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.cc-arrow {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.cc-arrow:hover {
    color: var(--text-highlight);
    border-color: var(--accent-light);
}

.cc-arrow-left {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}

.cc-arrow-right {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.cc-arrow-value {
    flex: 1;
    text-align: center;
    padding: 5px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-main);
    user-select: none;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-cup-select {
    max-width: 260px;
    margin: 0 auto;
    width: 100%;
}

.cc-cup-select label {
    text-align: center;
}

.cc-selectors .form-group {
    margin-bottom: 0;
}

/* ─── Custom Select ─── */
.custom-select { position: relative; width: 100%; cursor: pointer; }
.custom-select-display { padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.95rem; font-family: var(--font-main); transition: border-color var(--transition); user-select: none; }
.custom-select.open .custom-select-display, .custom-select-display:hover { border-color: var(--accent-light); }
.custom-select-options { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--bg-secondary); border: 1px solid var(--accent-light); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 220px; overflow-y: auto; }
.custom-select.open .custom-select-options { display: block; }
.custom-select-option { padding: 8px 12px; color: var(--text-primary); font-size: 0.9rem; transition: background 0.15s; cursor: pointer; }
.custom-select-option:hover { background: var(--bg-tertiary); }
.custom-select-option.selected { background: var(--bg-tertiary); border-left: 2px solid var(--accent-light); }
.custom-select-option .opt-value, .custom-select-display .opt-value { font-weight: 400; }
.custom-select-option .opt-desc, .custom-select-display .opt-desc { color: var(--text-secondary); font-weight: 400; font-style: italic; margin-left: 6px; }

/* ─── Cup Size Slider ─── */
.cc-slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.cc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-light);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.cc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-light);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.cc-slider-ticks {
    display: flex;
    justify-content: space-between;
    padding: 2px 7px 0;
}

.cc-slider-ticks .tick {
    width: 1px;
    height: 6px;
    background: var(--border-color);
}

/* ─── Option Cards ─── */
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.option-grid.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.option-card {
    padding: 20px 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: visible;
    min-height: 180px;
    justify-content: flex-start;
}

/* Subtle colored glow behind the card on hover — uses --card-glow set via JS */
.option-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(ellipse at center 30%, var(--card-glow, rgba(255,255,255,0.04)) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius);
}
.option-card:hover::before { opacity: 1; }
.option-card.selected::before { opacity: 1; }

.option-card:hover {
    border-color: var(--card-color, var(--border-hover));
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 12px var(--card-glow, transparent);
    z-index: 10;
}

.option-card.selected {
    border-color: var(--card-color, var(--accent-highlight));
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 16px var(--card-glow, transparent);
}

.option-card .option-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.75;
    transition: all 0.25s ease;
    filter: grayscale(0.15);
}
.option-card:hover .option-icon { opacity: 1; transform: scale(1.08); filter: grayscale(0); }
.option-card.selected .option-icon { opacity: 1; transform: scale(1.12); filter: grayscale(0) drop-shadow(0 0 10px rgba(255,255,255,0.2)); }

.option-card .option-title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}
.option-card:hover .option-title { color: var(--text-highlight); }

.option-card .option-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    max-width: 200px;
}
.option-card:hover .option-desc { color: var(--text-secondary); }

/* ─── Card Stat Badges ─── */
.card-stat-row {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.card-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.3px;
    cursor: help;
    position: relative;
    z-index: 1;
}
.card-stat-badge.stat-badge-up { color: #7defa0; }
.card-stat-badge.stat-badge-down { color: #ef7d7d; }
.card-stat-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.9;
}
/* Tooltip */
.card-stat-badge .stat-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 16, 20, 0.97);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    max-width: 320px;
}
.card-stat-badge:hover .stat-tooltip {
    display: block;
}

/* ─── Stat Change Notification (in-story) ─── */
.stat-change-notification {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    margin: 6px 0 2px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    border-left: 3px solid rgba(255,255,255,0.2);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    animation: statNotifIn 0.4s ease-out;
}
.stat-change-notification.stat-up {
    color: #ffffff;
    border-left-color: #7defa0;
}
.stat-change-notification.stat-down {
    color: #ffffff;
    border-left-color: #ef7d7d;
}
/* Romance-Zugewinn: derselbe Rosaton wie die Romance-Leiste im Dossier,
   damit die Meldung im Text und der Balken zusammengehoeren. */
.stat-change-notification.romance-change {
    color: #ffd6ea;
    border-left-color: #e87db4;
}
.stat-notif-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.stat-notif-text {
    line-height: 1;
}
@keyframes statNotifIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   GAME SCREEN - VISUAL NOVEL LAYOUT
   ═══════════════════════════════════════ */

.vn-layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    grid-template-rows: 1fr auto;
    height: 100vh;
    width: 100%;
    background: var(--bg-primary);
    position: relative;
}

/* ─── Portrait Areas ─── */
.portrait-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* ─── Location Banners ─── */
.location-banner {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
    /* Establish a stacking context so the bottom fade can sit above the
       rolldown overlay layer cleanly. */
    isolation: isolate;
}

.location-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--bg-primary));
    pointer-events: none;
    /* Must paint above the rolldown layer (z-index: 2) so the incoming
       image is faded at the bottom while it slides down — otherwise the
       new image briefly covers the gradient before it fades itself. */
    z-index: 3;
}

.location-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom;
}

.portrait-layers {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    height: 420px;
    margin-top: 8px;
    /* Force single GPU layer for all children — prevents sub-pixel gaps between stacked images */
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    opacity: 0.4;
    transition: opacity 0.4s ease;
    filter: grayscale(0.3);
}

.portrait-layers .portrait-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.portrait-area.has-character .portrait-img,
.portrait-area.has-character .portrait-layer {
    opacity: 1;
    filter: none;
}

.portrait-label {
    flex-shrink: 0;
    width: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-secondary);
    text-align: center;
    padding: 7px 6px 8px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-hover);
    /* Reserve a stable height so the banner (flex:1) doesn't grow/shrink
       when the label text appears or clears (e.g. no speaker on the right). */
    box-sizing: border-box;
    min-height: 28px;
}

/* Keep the label's box (and reserved height) even with no text, so the
   banner above stays the same size whether or not a speaker is shown.
   visibility:hidden keeps layout but hides the empty bar's background. */
.portrait-label:empty {
    visibility: hidden;
}

.portrait-area.has-character .portrait-label {
    color: var(--text-highlight);
}

.portrait-left {
    border-right: 1px solid var(--border-color);
    background: linear-gradient(to right, var(--bg-primary), rgba(14,14,14,0.6));
}

.portrait-right {
    border-left: 1px solid var(--border-color);
    background: linear-gradient(to left, var(--bg-primary), rgba(14,14,14,0.6));
}

/* Hide right portrait area when no character is present */
.portrait-right:not(.has-character) .portrait-layers {
    visibility: hidden;
}

/* ─── Group Portraits (stacked) ─── */
.portrait-group-member {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transition: opacity 0.4s ease;
}

/* Stagger group members: back members are smaller, shifted, and dimmer */
.portrait-group-member:nth-child(1) {
    transform: scale(0.75) translateX(-30%);
    opacity: 0.5;
    z-index: 1;
}
.portrait-group-member:nth-child(2) {
    transform: scale(0.75) translateX(30%);
    opacity: 0.5;
    z-index: 2;
}
/* Last / frontmost member is full size */
.portrait-group-member:last-child {
    transform: scale(1) translateX(0);
    opacity: 1;
    z-index: 3;
}
/* When only 2 members, first is background, second is front */
.portrait-layers > .portrait-group-member:first-child:nth-last-child(2) {
    transform: scale(0.8) translateX(-20%);
    opacity: 0.6;
    z-index: 1;
}
.portrait-layers > .portrait-group-member:last-child:nth-child(2) {
    transform: scale(1) translateX(0);
    opacity: 1;
    z-index: 2;
}

/* ─── Center Area ─── */
.vn-center {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Top bar */
.vn-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    min-height: 44px;
    flex-shrink: 0;
}

.vn-chapter {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
}

.vn-credits {
    font-size: 0.8rem;
    color: var(--credits-color);
    font-family: var(--font-mono);
}

/* Text area */
.vn-text-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.vn-text-output {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Text lines */
.text-line {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

/* Text speed variants */
[data-text-speed="slow"] .text-line { animation-duration: 0.6s; }
[data-text-speed="fast"] .text-line { animation-duration: 0.1s; }

/* Font size variants — applied to #vn-center so text AND choices scale.
   Higher specificity (.text-line.<modifier>) is used so these rules beat
   the per-modifier font-size declarations further down. */
[data-font-size="small"]  .text-line.narrator,
[data-font-size="small"]  .text-line.narrator.player-action { font-size: 0.85rem; }
[data-font-size="medium"] .text-line.narrator,
[data-font-size="medium"] .text-line.narrator.player-action { font-size: 1rem; }
[data-font-size="large"]  .text-line.narrator,
[data-font-size="large"]  .text-line.narrator.player-action { font-size: 1.2rem; }

[data-font-size="small"]  .text-line.dialogue { font-size: 0.9rem; }
[data-font-size="medium"] .text-line.dialogue { font-size: 1.05rem; }
[data-font-size="large"]  .text-line.dialogue { font-size: 1.25rem; }

[data-font-size="small"]  .text-line.system { font-size: 0.82rem; }
[data-font-size="medium"] .text-line.system { font-size: 0.95rem; }
[data-font-size="large"]  .text-line.system { font-size: 1.12rem; }

[data-font-size="small"]  .text-line.important { font-size: 0.9rem; }
[data-font-size="medium"] .text-line.important { font-size: 1.05rem; }
[data-font-size="large"]  .text-line.important { font-size: 1.25rem; }

[data-font-size="small"]  .speaker-tag { font-size: 0.65rem; }
[data-font-size="medium"] .speaker-tag { font-size: 0.7rem; }
[data-font-size="large"]  .speaker-tag { font-size: 0.85rem; }

/* Choice buttons scale with font size too */
[data-font-size="small"]  .story-choice-btn { font-size: 0.82rem; }
[data-font-size="medium"] .story-choice-btn { font-size: 0.9rem; }
[data-font-size="large"]  .story-choice-btn { font-size: 1.05rem; }

[data-font-size="small"]  .story-choice-btn .choice-number { font-size: 0.72rem; }
[data-font-size="medium"] .story-choice-btn .choice-number { font-size: 0.8rem; }
[data-font-size="large"]  .story-choice-btn .choice-number { font-size: 0.95rem; }

/* Continue / action button also scales */
[data-font-size="small"]  .action-btn { font-size: 0.85rem; }
[data-font-size="medium"] .action-btn { font-size: 0.95rem; }
[data-font-size="large"]  .action-btn { font-size: 1.1rem; }

.text-line.narrator {
    color: #999;
    line-height: 1.8;
    font-size: 1.0rem;
    font-style: italic;
}

/* Player action — same italic narrator style but slightly brighter */
.text-line.narrator.player-action {
    color: #aaa;
}

.text-line.dialogue {
    color: var(--text-primary);
    padding-left: 14px;
    border-left: 2px solid var(--accent-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

.text-line.system {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}

.text-line.important {
    color: var(--text-highlight);
    font-weight: 500;
    font-size: 1.05rem;
}

.text-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 6px 0;
}

/* Act/Chapter header */
.story-act-header {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 16px;
}

.story-act-header h2 {
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-highlight);
    font-weight: 500;
    margin-bottom: 4px;
}

.story-act-header p {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* End-of-chapter screen */
.end-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    animation: fadeIn 1.5s ease forwards;
}
.end-screen-inner { text-align: center; max-width: 420px; }
.end-title {
    font-size: 1.3rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--text-highlight);
    font-weight: 500;
    margin-bottom: 4px;
}
.end-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 20px;
}
.end-divider {
    width: 60px;
    height: 1px;
    background: var(--border-color);
    margin: 0 auto 20px;
}
.end-thanks {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.6;
}
.end-wip {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.end-follow {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.end-socials {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.end-socials a {
    color: rgba(255,255,255,0.45);
    font-size: 0.7rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.end-socials a:hover { color: rgba(255,255,255,0.85); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Speaker name tag in text */
.speaker-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    margin-top: 8px;
    font-weight: 600;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

.speaker-tag-player {
    color: var(--text-highlight);
}

/* Choices area */
.vn-choices {
    padding: 16px 32px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 60px;
}

#actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Story choice buttons */
.story-choice-btn {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.5;
    width: 100%;
}

.story-choice-btn:hover {
    border-color: var(--border-hover);
    border-left-color: var(--choice-trait-color, var(--border-hover));
    background: var(--bg-card-hover);
    color: var(--text-highlight);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.story-choice-btn .choice-number {
    color: var(--text-muted);
    margin-right: 8px;
    font-size: 0.8rem;
}

/* Choice icons (personality/background symbols) — displayed at end of text */
.story-choice-btn .choice-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0.5;
    filter: grayscale(0.3);
    transition: all var(--transition);
}

.story-choice-btn:hover .choice-icon {
    opacity: 1;
    filter: grayscale(0) drop-shadow(0 0 6px rgba(255,255,255,0.2));
    transform: scale(1.15);
}

/* Stat-locked choice (greyed out, not clickable) */
.story-choice-btn.choice-stat-locked {
    opacity: 0.4;
    cursor: not-allowed;
    border-left-color: var(--border-color);
}

.story-choice-btn.choice-stat-locked:hover {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: none;
}

.choice-locked {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-left: 8px;
    vertical-align: middle;
}

/* Continue / action button */
.action-btn {
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    width: 100%;
    text-align: center;
}

.action-btn:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    color: var(--text-highlight);
}

.action-btn.primary {
    background: linear-gradient(135deg, #333, #222);
    border-color: var(--accent-neutral);
    color: var(--text-highlight);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #444, #333);
    border-color: var(--accent-light);
}

/* ─── System Bar (Bottom) ─── */
.vn-system-bar {
    grid-column: 1 / -1;
    /* Grid mirrors .vn-layout (280px 1fr 280px) so Profile+Menu sit under
       the player portrait column while Skip stays centered in the middle. */
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.sys-bar-left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.sys-bar-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sys-bar-right {
    /* Empty spacer under the NPC portrait column. */
}

.sys-btn {
    padding: 5px 14px;
    min-width: 110px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.sys-btn:hover {
    color: var(--text-secondary);
    border-color: var(--border-hover);
    background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════
   OVERLAY PANELS (Character / Relationships)
   ═══════════════════════════════════════ */

.overlay-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-overlay);
    align-items: center;
    justify-content: center;
}

.overlay-panel.active {
    display: flex;
}

.overlay-content {
    width: 94%;
    max-width: 800px;
    height: 85vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.overlay-content > .overlay-header {
    padding: 24px 24px 12px;
    flex-shrink: 0;
}

#overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.overlay-header h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    font-weight: 400;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    transition: color var(--transition);
}

.btn-close:hover {
    color: var(--text-primary);
}

/* Back arrow in overlay-header — shown only when showOverlay is called
   with an onBack callback (e.g. from submenus opened via the Menu overlay). */
.btn-back {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 10px 0 0;
    margin-right: 8px;
    transition: color var(--transition);
    line-height: 1;
}

.btn-back:hover {
    color: var(--text-primary);
}

/* Compact overlay: used for simple menus like the in-game Menu overlay
   where the default 85vh container is way too big for four buttons. */
.overlay-content.compact {
    height: auto;
    max-height: 85vh;
    max-width: 420px;
}

.overlay-content.compact #overlay-body {
    padding-bottom: 20px;
}

/* ─── Profile overlay tabs (Profile + Relationships) ─── */
.profile-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.profile-tab {
    padding: 8px 22px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
    margin-bottom: -1px;
}

.profile-tab:focus {
    outline: none;
}

.profile-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.profile-tab.active {
    color: var(--text-highlight);
    background: var(--bg-secondary);
    border-color: var(--border-hover);
    border-bottom: 1px solid var(--bg-secondary);
}

.profile-tab-pane {
    display: flex;
    flex: 0 0 0;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.profile-tab-pane.active {
    flex: 1;
    height: auto;
    overflow: visible;
    pointer-events: auto;
}

/* ─── Menu overlay (Save / Load / Settings / Main Menu) ─── */
.menu-overlay-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 260px;
    margin: 8px auto 4px;
}

.menu-overlay-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.menu-overlay-btn:hover {
    color: var(--text-highlight);
    border-color: var(--border-hover);
    background: var(--bg-tertiary);
}

/* ─── Dossier / Profile ─── */
/* ── Dossier: USM Personnel File ── */
.dossier {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: rgba(255,255,255,0.015);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header bar */
.dossier-usm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.dossier-usm-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.7;
}
.dossier-usm-header-text { display: flex; flex-direction: column; }
.dossier-usm-title {
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}
.dossier-usm-subtitle {
    font-size: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(231,76,60,0.45);
    font-weight: 500;
}

/* Main: portrait left, fields right */
.dossier-main {
    display: flex;
    gap: 18px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dossier-photo {
    width: 170px;
    height: 230px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-primary);
    position: relative;
}
.dossier-photo img,
.dossier-photo .dossier-layer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.dossier-photo .dossier-layer {
    position: absolute;
    top: 0;
    left: 0;
}

/* Data fields */
.dossier-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}
.dossier-field {
    display: flex;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dossier-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    width: 110px;
    flex-shrink: 0;
}
.dossier-field-value {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.75);
}

/* Section bar (EVALUATION, STANDING, etc.) */
.dossier-section-bar {
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    padding: 6px 14px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.06);
    font-weight: 600;
}

/* Stats row */
.dossier-stats {
    display: flex;
    justify-content: space-evenly;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dossier-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dossier-stat-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    opacity: 0.85;
}
.dossier-stat-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dossier-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

/* Reputation / Standing (flag-driven) */
.dossier-standing {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dossier-standing:last-child {
    border-bottom: none;
}
.dossier-standing-faction {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 130px;
}
.dossier-standing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.dossier-standing-icon .faction-icon-img {
    width: 24px;
    height: 24px;
}
.dossier-standing-name {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.dossier-standing-sentence {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    flex: 1;
}
/* Reserved empty block under the standings, so the future-faction rows
   have room to land without the credits jumping around when they do.
   Also flex-grows so the ASSETS / credits block gets pinned to the
   bottom of the dossier container no matter how tall it gets. */
.dossier-standing-spacer {
    flex: 1 1 auto;
    min-height: 260px;
}

/* Footer */
.dossier-footer {
    font-size: 0.45rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.12);
    text-align: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: auto;
}

/* Legacy — keep for compatibility */
.dossier-identity { display: none; }
.dossier-name { font-size: 1.15rem; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.5px; }
.dossier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dossier-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.dossier-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 12px 0;
}

.dossier-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.char-field {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.char-field .label {
    color: var(--text-secondary);
}

.char-field .value {
    color: var(--text-highlight);
    font-weight: 500;
}

/* ─── Relationships (in overlay) ─── */

/* ─── Relationship File Viewer ─── */
.rel-faction-dropdown {
    margin-bottom: 12px;
}
.rel-faction-dropdown select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
.rel-faction-dropdown select:hover {
    border-color: var(--border-hover);
}
.faction-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.rel-file-group {
    display: flex;
    flex-direction: column;
}
.rel-file-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rel-file-arrow {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 32px;
    height: 60px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.15s;
}
.rel-file-arrow:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
}
.rel-npc-file {
    flex: 1;
    min-width: 0;
}
.rel-npc-file .dossier {
    flex: none;
}

.rel-pips {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

/* 15 vertical ticks per side, filled outward from the center (1 point = 1 tick) */
.rel-bar {
    width: 3px;
    height: 16px;
    border-radius: 1px;
    background: rgba(255,255,255,0.10);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.rel-bar.neg.filled {
    background: #c0392b;
    box-shadow: 0 0 3px rgba(231,76,60,0.45);
}

.rel-bar.pos.filled {
    background: #27ae60;
    box-shadow: 0 0 3px rgba(46,204,113,0.45);
}

.rel-bar.rom.filled {
    background: #e87db4;
    box-shadow: 0 0 3px rgba(232,125,180,0.5);
}

.rel-pip-center {
    width: 4px;
    height: 18px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 0 3px;
    flex-shrink: 0;
}


.rel-row-quote em {
    color: var(--text-secondary);
}

.relation-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

.relation-card {
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.relation-card-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.relation-portrait {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: relative;
}

.relation-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.relation-portrait .rel-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}


.relation-card-info {
    flex: 1;
    min-width: 0;
}

.relation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.relation-name { font-weight: 600; font-size: 0.9rem; }

.relation-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
}

.relation-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.relation-bar-container {
    height: 6px;
    background: linear-gradient(to right, #0a0a0a, rgba(255,255,255,0.15));
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    position: relative;
}

.relation-bar-indicator {
    position: absolute;
    top: -1px;
    width: 3px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: left var(--transition);
    box-shadow: 0 0 4px rgba(255,255,255,0.3);
}

.relation-bar {
    display: none;
}

.relation-bar.faction { background: #8e44ad; }

/* ─── Collapsible sections in dossier ─── */
.dossier-collapsible { margin-bottom: 4px; }

.dossier-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.dossier-collapse-header:hover .dossier-section-label { color: var(--text-secondary); }

.dossier-collapse-toggle {
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.dossier-collapse-body { display: none; padding-top: 8px; }
.dossier-collapse-body.open { display: block; }

.reputation-entry { margin-bottom: 8px; }

.reputation-sentence {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 4px 0 4px 8px;
    border-left: 2px solid var(--border-color);
    line-height: 1.5;
}

.faction-card {
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 6px;
}

.faction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.faction-name { font-weight: 500; font-size: 0.85rem; }
.faction-value { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ═══════════════════════════════════════
   CONFIRMATION MODAL
   ═══════════════════════════════════════ */

.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--bg-overlay);
    align-items: center;
    justify-content: center;
}

.confirm-modal.active {
    display: flex;
}

.confirm-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 28px 32px;
    text-align: center;
    max-width: 360px;
    width: 90%;
}

.confirm-box p {
    color: var(--text-primary);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-actions .btn {
    min-width: 100px;
}

/* ═══════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════ */

.btn {
    padding: 10px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.btn:hover { border-color: var(--border-hover); background: var(--bg-card-hover); color: var(--text-highlight); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, #333, #222); border-color: var(--accent-neutral); color: var(--text-highlight); }
.btn.primary:hover { background: linear-gradient(135deg, #444, #333); border-color: var(--accent-light); }
.btn.danger { border-color: var(--danger-color); color: var(--danger-color); background: transparent; }
.btn.danger:hover { background: rgba(192,57,43,0.1); }
.btn.muted { background: transparent; border-color: var(--text-muted); color: var(--text-muted); }
.btn.muted:hover { color: var(--text-secondary); border-color: var(--text-secondary); }
.btn.wide { min-width: 220px; }

/* ─── Utilities ─── */
.hidden { display: none !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Responsive ─── */
@media (max-width: 1000px) {
    .vn-layout { grid-template-columns: 180px 1fr 180px; }
    .vn-system-bar { grid-template-columns: 180px 1fr 180px; }
    .sys-bar-left { gap: 6px; }
    .vn-text-area { padding: 16px 20px; }
    .vn-choices { padding: 12px 20px 14px; }
}

/* ─── Save Upload Row ─── */
.save-upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
}

.save-upload-label {
    flex: 1;
    font-size: 0.85em;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Save Slots ─── */
.save-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.save-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.save-slot:hover {
    border-color: var(--accent);
}

.save-slot-header {
    font-weight: 600;
    min-width: 50px;
    color: var(--accent);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.save-slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.save-slot.empty .save-slot-info {
    color: var(--text-muted, #555);
    font-style: italic;
}

.save-slot-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.save-slot-time {
    font-size: 0.8em;
    color: var(--text-muted, #888);
}

/* Personality / background / origin badges — identify a save at a glance. */
.save-slot-traits {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.save-slot-trait {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(0.3);
    transition: all var(--transition);
}

.save-slot:hover .save-slot-trait {
    opacity: 1;
    filter: grayscale(0);
}

.save-slot-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.save-slot-btn {
    padding: 5px 12px;
    font-size: 0.8em;
    min-width: 0;
}

.save-slot-btn.download {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 3px 8px;
    line-height: 1;
}

.save-slot-btn.download:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-light);
    color: var(--text-highlight);
}

.save-slot-btn.delete {
    background: transparent;
    border-color: #633;
    color: #c66;
}

.save-slot-btn.delete:hover {
    background: #422;
    border-color: #944;
}

/* ─── Breathing ───
   Handled on the canvas (portraitCompositor.enableBreathing), not here.
   A CSS scaleY on the whole element resampled the entire downscaled portrait
   every frame, so the whole figure shimmered and the hips at the bottom edge
   looked like they were bobbing. The canvas version moves only the slice
   above the waist and leaves the lower body pixel-identical. */

/* ─── Tablet (700px) ─── */
@media (max-width: 700px) {
    .vn-layout { grid-template-columns: 100px 1fr 100px; }
    /* Below 700px the portrait columns are too narrow for two full buttons,
       so let Profile+Menu wrap into the space using a slightly wider slot. */
    .vn-system-bar { grid-template-columns: auto 1fr auto; padding: 6px 10px; }
    .sys-bar-left { gap: 4px; }
    .menu-banner { max-width: 400px; }
    .btn.wide { min-width: 180px; }
    .option-grid, .option-grid.grid-3, .option-grid.grid-4 { grid-template-columns: 1fr 1fr; }
    .option-card { min-height: 100px; padding: 14px 12px; }
    .option-card .option-icon { width: 48px; height: 48px; }
    .card-stat-badge .stat-tooltip { white-space: normal; min-width: 160px; }

    /* Overlay */
    .overlay-content { width: 98%; height: 90vh; }

    /* Dossier */
    .dossier-main { flex-direction: column; align-items: center; }
    .dossier-photo { width: 140px; height: 190px; margin-bottom: 10px; }
    .dossier-fields { width: 100%; }
    .dossier-stats { flex-wrap: wrap; justify-content: center; }
}

/* ─── Mobile (550px) ─── */
@media (max-width: 550px) {
    /* Game layout: fullscreen text, hide side portraits */
    .vn-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto;
    }
    .portrait-area { display: none; }

    /* System bar: compact two-column layout — left group + centered Skip. */
    .vn-system-bar {
        grid-template-columns: auto 1fr auto;
        gap: 4px;
        padding: 6px 8px;
    }
    .sys-bar-right { display: none; }
    .sys-btn {
        padding: 8px 6px;
        font-size: 0.65rem;
        min-height: 36px;
        min-width: 82px;
    }

    /* Topbar compact */
    .vn-topbar { padding: 8px 12px; min-height: 36px; }
    .vn-chapter { font-size: 0.6rem; }
    .vn-credits { font-size: 0.7rem; }

    /* Text area: more padding, larger text for readability */
    .vn-text-area { padding: 14px 16px; }
    .vn-choices { padding: 10px 16px 14px; }
    .choice-btn { padding: 12px 14px; font-size: 0.85rem; min-height: 44px; }

    /* Menu */
    .menu-banner { max-width: 280px; }
    .menu-container { padding: 24px 16px; }
    .btn.wide { min-width: 200px; font-size: 0.85rem; padding: 14px 20px; }
    .menu-version { margin-top: 28px; }
    .menu-credit { margin-top: 20px; }
    .menu-socials { gap: 10px; }

    /* Disclaimer */
    .disclaimer-container { padding: 20px 16px; }
    .disclaimer-text { font-size: 0.82rem; }

    /* Character creation */
    #screen-creation { padding: 20px 0; }
    .creation-container { width: 96%; }
    .cc-portrait-preview canvas { width: 200px; height: 300px; }
    .cc-selectors { max-width: 100%; }
    .cc-selector-row { flex-wrap: nowrap; }
    .form-row { flex-direction: column; gap: 0; }
    .option-grid, .option-grid.grid-3, .option-grid.grid-4 { grid-template-columns: 1fr; }
    .option-card { min-height: 80px; padding: 12px 10px; }
    .option-card .option-icon { width: 40px; height: 40px; }
    .option-card .option-title { font-size: 0.8rem; }

    /* Overlay fullscreen on mobile */
    .overlay-content {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
        border: none;
    }
    .overlay-header { padding: 10px 14px; }
    .overlay-body { padding: 10px 14px; }

    /* Save slots */
    .save-slot { flex-wrap: wrap; padding: 10px; gap: 8px; }
    .save-slot-actions { width: 100%; justify-content: flex-end; }
    .save-slot-btn { padding: 8px 14px; min-height: 36px; }

    /* Dossier cards */
    .dossier { font-size: 0.85rem; }
    .dossier-main { flex-direction: column; align-items: center; padding: 12px; }
    .dossier-photo { width: 120px; height: 165px; margin-bottom: 8px; }
    .dossier-fields { width: 100%; }
    .dossier-field-label { width: 90px; font-size: 0.65rem; }
    .dossier-field-value { font-size: 0.78rem; }
    .dossier-stats { flex-wrap: wrap; gap: 16px; padding: 10px; }
    .dossier-stat-icon { width: 32px; height: 32px; }

    /* Relationship file nav */
    .rel-file-arrow { font-size: 1.2rem; padding: 8px 12px; min-height: 44px; }
    .rel-faction-dropdown select { font-size: 0.8rem; padding: 8px 10px; }

    /* Confirm modal */
    .confirm-box { width: 92%; padding: 20px 16px; }
    .confirm-actions .btn { min-height: 44px; padding: 12px 20px; }

    /* Options */
    .options-container { width: 96%; padding: 20px 16px; }
    .volume-slider { height: 32px; }
    .option-row { flex-direction: column; gap: 6px; }
}

/* ─── Small phones (400px) ─── */
@media (max-width: 400px) {
    .vn-text-area { padding: 10px 12px; }
    .vn-choices { padding: 8px 12px 10px; }
    .choice-btn { font-size: 0.8rem; padding: 10px 12px; }
    .sys-btn { padding: 6px 4px; font-size: 0.58rem; min-width: 66px; }
    .menu-banner { max-width: 220px; }
    .btn.wide { min-width: 160px; }
    .dossier-photo { width: 100px; height: 140px; }
    .cc-portrait-preview canvas { width: 160px; height: 240px; }
}

/* ─── Landscape orientation hint (phones in portrait) ─── */
@media (max-width: 550px) and (orientation: portrait) and (max-height: 700px) {
    #landscape-hint { display: flex !important; }
}
@media (min-width: 551px), (orientation: landscape) {
    #landscape-hint { display: none !important; }
}